<html>

<head>
    <link rel="stylesheet" href="../../node_modules/jquery-contextmenu/dist/jquery.contextMenu.min.css">
    <script src="contextmenu-bundle.js"></script>
    <style>


        .context-menu-list{
            border: 0px;
            border-radius: 0px;
            background-color: #43423E;
            font-family: 'Ubuntu';
            font-size: 15px
        }


        .context-menu-item{
            color: #d8d5cd;
            background-color: #43423E;
            margin-left: 5px;
            padding-right: 20px; /*if you have a drop caret, best to delete this to avoid design problems*/

        }


        .context-menu-item-field{
            margin-left: 8px;
        }

        .context-menu-item-shortcut{
            float: right;
            color: #898579;
        }

        .context-menu-separator{
            margin:2px 8px;
            border-top: 1px solid #3a3a37;
            border-bottom: 1px solid #494946;
        }


        /** icons colors*/
        .icon-red::before{
            color: #ef4343;
        }

        .icon-green::before{
            color: #2e9b7c;
        }

    </style>

</head>
<body>

<p>
This is the context menu I want re-styled.
</p>

<ul class="context-menu-list context-menu-root" style="width: 209.021px; top: 40px; left: 57px; z-index: 1;">
    <li class="context-menu-item context-menu-icon context-menu-icon-edit"><span>Edit  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Alt-E</span></li>
    <li class="context-menu-item context-menu-icon context-menu-icon-cut"><span>Cut &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  Alt-E</span></li>
    <li class="context-menu-item context-menu-icon context-menu-icon-copy"><span>Copy</span></li>
    <li class="context-menu-item context-menu-icon context-menu-icon-paste"><span>Paste</span></li>
    <li class="context-menu-item context-menu-icon context-menu-icon-delete"><span>Delete</span></li>
    <li class="context-menu-item context-menu-separator context-menu-not-selectable"></li>
    <li class="context-menu-item context-menu-icon context-menu-icon-quit"><span>Quit</span></li>
</ul>


<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<p>
    I want it to look like exactly like this (font-size, color, text color, etc):

    We can't modify the element structure or styles as these were generated by
    jquery-contextmenu and I can't change them.
</p>

<img src="menu.png">

</body>
</html>
